<%@ tag pageEncoding="UTF-8"%>

<%@ attribute name="id" type="java.lang.String" required="true"%>
<%@ attribute name="name" type="java.lang.String" required="true"%>
<%@ attribute name="value" type="java.lang.String" required="true"%>
<%@ attribute name="nvgList" type="java.util.List" required="true"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tag" tagdir="/WEB-INF/tags" %>
	
	<style type="text/css">
		ul{list-style-type: none}
        
        .dropdown ,.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px;display:block; }
        .dropdown dd { position:relative; }
        .dropdown .dropItems{ display:none;position:absolute; top:1px;left:0px;background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; z-index: 1000;}
        .dropdown a, .dropdown a:visited { cursor:pointer; color:#816c5b; text-decoration:none; outline:none;}
        .dropdown a:hover { color:#5d4617;}
        .dropdown dt a:hover { color:#5d4617; border: 1px solid #d0c9af;}
        .dropdown dt a {background:#e4dfcb no-repeat scroll right center;padding: 3px;  display:block; padding-right:20px;border:1px solid #d4ca9a; width:400px;}
        .dropdown dd ul {  display: block; width:auto; min-width:450px; list-style:none;}
       
        .dropdown dd ul li a { padding:2 10px; display:block;}
        .dropdown dd ul li a:hover { background-color:#d0c9af;}
        
        .dropItems li{padding-left:3px;}
        .dropItems li ul{ padding-left:10px; }
	</style>
	
	<input id="${id}" type="hidden" name="${name}" value="${value}" />
	<dl id="${id}_dropdown" class="dropdown">
		<dt><a ><span>无节点</span></a></dt>
		<dd>
			<ul class="dropItems">
	         	<tag:titleSelectTreeItems nvgList="${nvgList}"></tag:titleSelectTreeItems>
			</ul>
		</dd>
	</dl>
	<script type="text/JavaScript" defer="defer">
		$(document).ready(function(){
			/******父节点选择*******/
	       $(".dropdown dt a").click(function() {
	           $(".dropdown dd ul.dropItems").toggle();
	           return false;
	       });
	                   
	       $(".dropdown dd ul.dropItems li a").click(function() {
	           var text = $(this).html();
	           $(".dropdown dt a span").html(text);
	           $(".dropdown dd ul.dropItems").hide();
	           
	           $("#${id }").val($(this).attr("value"))
	           return false;
	       }).each(function() {
				if($(this).attr("value")=='${value}'){
				 	$(".dropdown dt a span").html($(this).html());
				 }
			});
	                   
	       $(document).bind('click', function(e) {
	           var $clicked = $(e.target);
	           if (! $clicked.parents().hasClass("dropdown"))
	               $(".dropdown dd ul.dropItems").hide();
	       });
		})
	</script>